<template>
    <!-- <AnimTable ref="anim" :max="12" class="mo-list" :interval="300">
        <template v-slot:row="{ row: item, rowIndex, ago }">
            <CardC :card-data="item" :ago = "ago"></CardC>
        </template>
    </AnimTable> -->
    <div class="m-list">
        <CardC :item="item" v-for="item in dataAry" :key="item.id"></CardC>
    </div>
</template>

<script lang="ts" setup>
// import { uuidCreate } from "@/comm/uuid";
import Card from "./components/card.vue";
import CardB from "./components/cardB.vue";
import CardC from "./components/cardC.vue";
import { Bus, CONN_FLUCTUATION, CONN_BIG_AMOUNT, KLINE_RESET } from "@/connetion/Bus";
import { ref, onMounted, onUnmounted, computed, watch } from "vue";
import { formatNumber, formatBigNumber, formatTimestamp, formatTimeAgo } from "@/comm/format";
import Copy from "@/components/copy/index.vue";
import { useActivity } from "@/stores/activity";
import AnimTable from "@/components/table-list/index.vue";
import { difference } from "@/comm/arrayTooler";
import i18n from "@/locals";
import { uuidCreate } from "@/comm/uuid";
import { lstat } from "fs";
// import { computed } from "vue";

// const list = ref<any>([]);
const anim = ref();
const activity = useActivity();

const dataAry = ref<any[]>([]);

// Bus.on(CONN_FLUCTUATION, (val: any) => {
//     console.log("大額成交", val);
//     addTransaction(val, "大額成交");
// });

// watch(()=>[...activity.bigAmounts], (newVal, oldVal)=>{
//     const diff = difference(newVal, oldVal);
//     if(anim.value){
//         anim.value.addList(warpData(diff));
//     }
// })

Bus.on(CONN_BIG_AMOUNT, (val: any) => {
    console.log("add big CONN_BIG_AMOUNT--");
    addTransaction(val);
});

const onLog = (item: any) => {
    console.log(item);
};

let timerId = 0;
onMounted(async () => {
    timerId = window.setInterval(() => {
        dataAry.value.forEach((val: any) => {
            val.time = formatTimeAgo(val.timestamp);
        });
    }, 1000);

    // console.log("######## watch activity.bigAmounts")
    // if(location.href.includes("/browser") || location.href.includes("/token") || location.href.includes("/address")){
    //     await activity.loadBigAmount();
    //     setTimeout(() => {
    //         initData();
    //     }, 1200);

    // }
    await activity.loadBigAmount();
    // setTimeout(() => {
    initData();
    // }, 300);

    Bus.on(KLINE_RESET, (val: any) => {
        initData();
    });
});

function initData() {
    console.log("big 事件");
    let ary = [...activity.bigAmounts];
    ary.sort((a: any, b: any) => (a.timestamp > b.timestamp ? -1 : 1));
    const list: any[] = warpData(ary);
    // console.log('yzt_',list);
    // anim.value.resetTable(list.slice(0, 30));

    dataAry.value = list.slice(0, 30);

    // dataAry.value = list.slice(20);

    // let id = 18
    // setInterval(() => {
    //     addTransaction(ary[id]);
    //     id--;
    // }, 3000);
}

function warpData(ary: any[]) {
    return ary.map(val => {
        return {
            // title: val.type == "swap" ? "大額成交" : "大額轉賬",
            title: val.type == "swap" ? i18n.global.t("message.Monitor.type.a") : i18n.global.t("message.Monitor.type.b"),
            swap: val.type == "swap",
            inAmount: val.inAmount ? formatBigNumber(Math.abs(val.inAmount)) : 0,
            outAmount: val.outAmount ? formatBigNumber(Math.abs(val.outAmount)) : 0,
            inSymbol: val.inSymbol,
            outSymbol: val.outSymbol,
            address: val.fromTag || val.address,
            toAddress: val.toTag || val.toAddress,
            time: formatTimeAgo(val.timestamp),
            timestamp: val.timestamp,
            inusdt: formatBigNumber(val.inusdt),
            outusdt: formatBigNumber(val.outusdt),
            origin: val,
            id: uuidCreate()
        };
    });
}

onUnmounted(() => {
    clearInterval(timerId);
});

const addTransaction = (val: any) => {
    // activity.pushBigAmounts(val);
    // if (anim.value) {
    //     anim.value.addList(warpData([val]));
    // }
    let t = warpData([val]);
    t.push(...dataAry.value);
    t.sort((a: any, b: any) => (a.timestamp > b.timestamp ? -1 : 1));
    dataAry.value = t.slice(0, 30);
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
